<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Efectos simples</title>
    <script src="jquery.js" type="text/javascript" language="text/javascript"></script>

    <style>
        div.panel
        {
            width: 50%;
            margin-left: 1em;
            background-color: rgb(220, 255, 220);
            border: 1px solid green;
            padding: 1em;
        }

    </style>

    <script>
        $(document).ready(
        function()
        {
            // Efecto inicial
            $(".panel").hide();
            $(".panel").fadeIn(1000);



            // Coloca un fondo blanco cuando pasa con el mouse
            // por arriba.
            $(".panel").mousemove(
            function()
            {
                $(this).css("background-color", "white");
            });



            // Restaura el color de fondo del panel.
            $(".panel").mouseout(
            function()
            {
                $(this).css("background-color", "rgb(220, 255, 220)");
            });



            // Extrae todo el contenido del panel cuando hace click.
            $(".panel").click(
            function()
            {
                var contenido = $(this).html();
                alert(contenido);
            });

        });
    </script>
</head>

<body>
    <h1>Efectos</h1>

    <p>
    En esta página se pemite <em>Interactuar</em> con los
    paneles cuando usa el mouse.

    <div class='panel'>
        Sobre este panel puede pulsar el mouse para obtener
        todo el contenido en un mensaje de alerta.
    </div>

    <p>
    Además, cuando pase por arriba de uno de estos cuadros cambiará
    de color. Intente con el que sigue:

    <div class='panel'>
        Este cuadro es de la misma clase que el anterior, así que hará lo
        mismo.
    </div>
    
</body>
        
</html>
